{include file="../application/admin/view/default/header.html" title="编辑新闻" adminData=$adminData /}

<style>
    html{
        font-size: 22px;
    }
    ol,li{
        list-style: none;
    }
    .breadcrumb{
        height: 45px;
        width: 140px;
        display: inline-block;
        background: #2ebaae;
        text-align: center;
        line-height: 45px;
        margin-bottom: 20px;
        border-radius: 4px;
        color: #fff;
    }
    .breadcrumb:hover{
        color: #fff !important;
    }
    .label{
        margin-bottom: 10px;
    display: inline-block;
    margin-top: 15px;
    font-size: 16px;
    }
    .file{
        display: inline-block;
        width: 120px;
        height: 40px;
        background: #2ebaae;
        border-radius: 6px;
        color: #fff;
        line-height: 40px;
        text-align: center;
        position: absolute;
        top: 0;
    }
    #form input{
        width: 120px;
        height: 40px;
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
    }
    #form{
        margin: 0;
        position: relative;
        height: 130px;
    }
    .remark{
        resize: none;
    }



.tuijian{
    height: 22px;
    margin: 20px 0 15px 0;
}
    .tuijian span {
    margin: 0;
    line-height: 22px;
    position: absolute;
}

            /* ==========================================================================
                    label标签模拟按钮         
       ========================================================================== */
       .emulate-ios-button {
            display: inline-block;
            width: 2rem;
            height: 1rem;
            background: #ccc;
            border-radius: 5rem;
            cursor: pointer;
            position: relative;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
            margin: 0;
            margin-left: 60px;
        }

        /* ==========================================================================
                    设置伪类,来实现模拟滑块滑动,过渡用了transition来实现 ,
                    translateZ来强制启用硬件渲染   
       ========================================================================== */

        .emulate-ios-button:after {
            content: '';
            display: block;
            width: .9rem;
            height: .9rem;
            border-radius: 100%;
            background: #fff;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
            position: absolute;
            left: .05rem;
            top: .05rem;
            -webkit-transform:translateZ(0);    
            transform:translateZ(0);
            -webkit-transition: all .3s ease;  
            transition: all .3s ease;
        }

        .emulate-ios-button:active:after {
            width: 1.1rem;
        }

      /* ==========================================================================
                    设置raw-checkbox,视觉直观比较 
       ========================================================================== */
        .raw-checkbox{
            opacity: 0;
        }

        .raw-checkbox:checked+label {
            background: #34bf49;
        }

        /* 这里是伪元素偏移,初始是0.9+0.05 ,所以这里1.05rem */
        .raw-checkbox:checked+label:after {
            left: 1.05rem;
        }

        .raw-checkbox:checked+label:active:after {
            left: .5rem;
        }


        .raw-checkbox:disabled+label {
            background: #d5d5d5;
            pointer-events: none;
        }

        .raw-checkbox:disabled+label:after {
            background: #bcbdbc;
        }

</style>
<div id="main" class="container padding-top-md text-slg">
    <div class="post" >
        <div class="clearfix">
                <a class="breadcrumb" href="/admin/news/index">后台首页</a>
        </div>
        <div class="clearfix">
            <div class="panel panel-default">
                <div class="panel-body">

                    <div class="tuijian">
                        <span class="label default col-sm-1 text-lg">设为推荐</span>
                        <input type="checkbox" id="ios-checkbox" name="emulate-ios-button" class="raw-checkbox" >
                        <label for="ios-checkbox" class="emulate-ios-button"></label>
                    </div>

                    <div class="input-group mar btn-block">
                        <span class="label default col-sm-1 text-lg">文章封面图</span>
                        <form id="form">
                            <div class="file" >
                                上传封面图
                            </div>
                            <input type="file" name="image">
                            <img id="imgurl" src="/uploads/{$newsData.imgurl}" alt="" srcset="" width="250px" style="margin-left: 150px;" >
                        </form>
                    </div>


                    <div class="input-group mar btn-block">
                        <span class="label default col-sm-1 text-lg">新闻标题</span>
                        <input type="text" class="col-sm-9 inp title" value="{$newsData.title}">
                    </div>
                    <div class="input-group mar btn-block">
                            <span class="label default col-sm-1 text-lg">新闻简介</span>
                            <textarea class="remark" >{$newsData.remark}</textarea>
                    </div>
                    <div class="input-group mar btn-block">
                        <span class="label default col-sm-1 text-lg">新闻内容</span>
                        <div id="detail">{$newsData.detail}</div>
                        
                    </div>
                    <textarea id="text1" class="textarea none detail "></textarea>


                    <div class="input-group mar btn-block">
                        <button style="margin: 15px 0;" class="btn btn-primary editNews text-slg" data-id="{$newsData.nid}">编辑</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" src="/static/js/wangEditor.min.js"></script>

<script>

    var Recommend = '';

    $('#ios-checkbox').click(function(){
        if($('#ios-checkbox').prop('checked')){
            Recommend = 1;
        }
        console.log(Recommend);
    })

    if( {$newsData.recommend} == 1 ){
        $("#ios-checkbox").attr("checked",'true');   
    }

</script>

<script>
        $(document).on("change","#form input",function (e) {
            upload({
                url:'upload',
                formNode:this.parentNode,
                token:'hellothisismytokenstring',
                sCallback:function (res) {
                    console.log(res);
                    var img = res;
                    
                }
            })
            $("#imgurl").attr('src','/uploads/'+imgurl); 
        });
    
        var imgurl = "";
        function upload(params) {
            var data = new FormData(params.formNode);
            $.ajax({
                async:false,
                url:params.url,
                type:'POST',
                headers:{token:params.token},
                data:data,
                dataType:'JSON',  //定义返回结果的类型
                cache:false,
                contentType:false,
                processData:false,
                success:function (res) {
                    imgurl = res;
                    params.sCallback && params.sCallback(res);
    
                }
            });
            return imgurl;
        }
       
    
    </script>

<script>
    $(document).ready(function(){
        var E = window.wangEditor
        var editor = new E('#detail')
        var $text1 = $('#text1')
        editor.customConfig.onchange = function (html) {
            // 监控变化，同步更新到 textarea
            $text1.val(html)
        }
        editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
        editor.create()
        // 初始化 textarea 的值
        $text1.val(editor.txt.html())

        

        $('.editNews').on('click',function(){
            $.ajax({
                type:'POST',
                url:'/admin/news/edit',
                dataType:'json',
                data:{'nid':$('.editNews').data('id'),'title':$('.title').val(),'detail':$('.detail').val(),'imgurl':imgurl,'recommend':Recommend,'remark':$('.remark').val()},
                success:function(data){
                    alert(data.msg);
                    if(!data.code){
                        window.location.reload();
                    }
                }
            });
        });
    })
</script>
</html>